<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="util.*"%>
<%@page import="dal.*,bll.*"%>
<%@ page import="model.*,java.util.*"%>

<%
	int idProject = MiscUtil.getIntUrlParam(request, "idProject");
	ProjectModel project;
	{
		GenericDal<ProjectModel, ProjectModelExt> dal = new GenericDal<ProjectModel, ProjectModelExt>(
				new ProjectModel());
		ProjectModel query = new ProjectModel();
		query.setId(idProject);	
		project = dal.select(query);
	}

	boolean embedded = MiscUtil.getBoolUrlParam(request, "embedded", false);
	
	List<ProjectModel> projectList = CacheUtil.getProjectList();
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Project - <%=project.getName()%></title>

<link rel='stylesheet' type='text/css' href='css/common.css' />
<link rel="stylesheet" type="text/css" href="css/buzz-design.css"/>
<link rel="stylesheet" href="css/scrollbar.css" type="text/css" />
	
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){				
	$('#v-scrollbar-phase').tinyscrollbar();
});
function togglePhaseDetail(obj)
{
	//Get row index, column index
	var rowIndex = -1;
	var colIndex = -1;
	var parent = obj;
	
	while (parent.tagName.toLowerCase() != 'tr')
	{
		if (parent.tagName.toLowerCase() == 'td')
		{
			colIndex = parent.cellIndex;
		}
		parent = parent.parentNode;
	}
	rowIndex = parent.rowIndex;
	//rows = parent.parentNode.getElementByTagName('tr');
	
	//Change the icon and class
	$(obj).toggleClass('expandButton collapseButton');
	$(obj.parentNode).toggleClass('phase-expandable phase-collapsable'); //It seem to be useless now but reserved.
	
	//toggle phase detail
	var phaseTable = $('#phase table tbody tr');
	var rows = phaseTable;
	var stop = false;
	for (var i = rowIndex + 1; i < rows.length && stop == false; i++)
	{
		var curRow = $(rows[i]);
		if (curRow.hasClass('phase-list'))
		{				
			stop = true;
		}
		else
		{
			curRow.toggle();
		}
	}
	return;
}

	function togglePhase(phase, tasks) {
					
		toggleControls(tasks);
		
		// TODO phase = idPhase
		// change icon of phase
		
		var ctrl = $('#td_phase_toggle_' + phase);
		if (ctrl.hasClass('expandButton')) {
			ctrl.removeClass('expandButton');
			ctrl.addClass('collapseButton');			
		}
		else {
			ctrl.removeClass('collapseButton');
			ctrl.addClass('expandButton');
		}		
	}
</script>
<script type="text/javascript">
	
</script>
<style type="text/css">

	.phaseList{
		width:1010px;
		vertical-align: top;
		text-align: left;
	}
	
	.tblphaseList.Header{
		width: 1010px;
		height: 103px;
		background: url(image/phaseList-header.gif) no-repeat;
		border: solid 1px #C0BFBF;
		vertical-align: top;
	}
	
	.timeline td{		
		width: 120px;
		height: 30px;
		font-size: 80%;
	}
	
	.timeline a, a:active{
		color: #030303;
		text-decoration: none;
	}
	.timeline a:hover{
		width:120px;
		height: 25px;
		color: #FFFFFF;
		text-decoration: none;
		font-weight: bold;
	}
	.timeline a:hover span{
		display: inline-block;
		width: 120px;
		height: 25px;
		padding-top: 7px; 
		background: url(images-interface/timeline_button_bg.gif) no-repeat;
		background-position: center center;
	}
	.timeline.active_item{
		color: #FFFFFF;
		display: inline-block;
		width: 120px;
		height: 25px;
		padding-top: 7px; 
		background: url(images-interface/timeline_button_bg.gif) no-repeat;
		background-position: center center;
	}
	
	
	/*================ Temp scrollbar =========== */
	#v-scrollbar-phase { width: 905px; clear: both;}
	.v-scrollbar-wrap .viewport { width: 850px; height: 300px; overflow: hidden; position: relative; }
	.v-scrollbar-wrap .overview { list-style: none; position: absolute; left: 0; top: 0; }
	.v-scrollbar-wrap .thumb .end,
	.v-scrollbar-wrap .thumb { /*background-color: #003D5D;*/ }
	.v-scrollbar-wrap .scrollbar { 
		background: url(image/bg-scrollbar-track-y.png) no-repeat scroll 0 0 transparent;
		float: right;
		position: relative;
		width: 10px;
	}
	.v-scrollbar-wrap .track {
		/*background: url(image/bg-scrollbar-trackend-y.png) no-repeat scroll 0 100% transparent;*/
		height: 100%;
		position: relative;
		width: 15px;
	}
	.v-scrollbar-wrap .thumb {
		background: background-color: rgba(0, 0, 0, 0.4); border-radius: 7px 7px 7px 7px;/*url(image/bg-scrollbar-thumb-y.png) no-repeat scroll 50% 100% transparent;*/
		cursor: pointer;
		height: 25px;
		left: 1px;
		overflow: hidden;
		position: absolute;
		top: 0;
		width: 9px;
	}
	.v-scrollbar-wrap .thumb .end {
		/*background: url(image/bg-scrollbar-thumb-y.png) no-repeat scroll 50% 0 transparent;*/
		height: 0px;/*5px;*/
		overflow: hidden;
		width: 25px;
	}
	.v-scrollbar-wrap .disable{ display: none; }

	/*================ Temp ===================*/
	table.phase-container {
		border-collapse:collapse;	
	}
	
	table.phase-container td {
		border:1px solid #e6e6e6;
		height:28px;
		width:28px;	
		vertical-align:middle;
	}
	
	.first-row td {
		text-align:center;	
	}
	
	.date td {
		text-align:center;	
	}
	
	.active-day {
		background:url(image/phase_orange.gif) no-repeat left center;	
	}
	
	.phase-header {
		background:url(image/phase_header_bg.gif) repeat-x left center;	
	}
	
	span.small-arrow {
		font-size:8px;
		background:url(image/ico_small_up_arrow.gif) no-repeat right center;
		display:block;
		text-align:left;
		padding:0 2px;
	}
	
	table.phase-container td.phase-title {
		width:30%;
	}
	
	.phase-header td {
		text-align:center;	
	}
	
	td.phase-icon-header {
		text-align:center;	
	}
	
	
	td span.phase-icon-title {
		height:26px;
		line-height:26px;
		float:left;
	}
	
	.phase-list {
		background:url(image/phase_light_blue.gif) repeat-x left center;	
	}
	
	.phase-icon-list {
		background:#fff;	
		text-align:center;
	}
	
	.expandButton
	{
		background:url(image/ico_right_arrow.gif) no-repeat left center;		
	}
	
	.collapseButton
	{
		background:url(image/ico_down_arrow.gif) no-repeat left center;		
	}
	
	td.phase-expandable {
		background-position:5px;
	}
	
	td.phase-collapsable {
		
	/*	background:url(image/ico_down_arrow.gif) no-repeat left center;	
	*/
		background-position:5px;
	}
	
	td.phase-expandable span, td.phase-collapsable span {
		padding-left:25px;
	}
	
	.phase-list-detail-header {
		background:url(image/phase_light_green.gif) repeat-x left center;	
	}
	
	.phase-detail-header {
		background:url(image/ico_folder.gif) no-repeat left center;	
		background-position:20px;	
	}
	
	.phase-list-detail-header span {
		padding-left:5em;
	}
	
	.phase-detail {
		background:url(image/ico_page.gif) no-repeat left center;	
		background-position:40px;	
	}
	
	.phase-detail span {
		padding-left:6em;	
	}
	
	#phase-notice {
		background:url(image/phase_notice_bg.gif) repeat-x left center;
		height:45px;
		width:100%;	
		line-height:45px;
	}
	
	.phase-notice-left {
		width: 40%;
		float:left;
		border-right:2px solid #ccc;	
	}
	
	.main-field {
		float:left;	
		padding:0 5px 0 5px;
	}
	
	.notice-icon {
		float:left;	
		padding:0 10px 0 10px;
	}
	
	.phase-notice-right {
		width: 58%;
		float:right;	
	}

</style>

</head>
<body><div class="divContainer">
	<%@ include file="menu.jsp"%>
	<table>
		<tr><td class="tblContent bigHeader" colspan="2">
			<table class="timeline"><tr>
				<td><a class="" href=""><span class="timeline active_item">BRIEF & ANALYSIS</span></a></td>
				<td><a class="" href=""><span>ORGANIZATION</span></a></td>
				<td><a class="" href=""><span>BRAINSTORM SPACE</span></a></td>
				<td><a class="" href=""><span>DATA</span></a></td>
				<td><a class="" href=""><span>COST CENTER</span></a></td>
				<td><a class="" href=""><span>REPORT CENTER</span></a></td>
				<td><a class="" href=""><span>ISSUE HUB</span></a></td>
				<td><a class="" href=""><span>KNOWLEDGE</span></a></td>
				<td><a class="" href=""><span>TIMELINE</span></a></td>
			</tr></table>
		</td></tr>
		<tr>
			<td class="phaseList">
				<table>
					<tr><td class="tblphaseList Header" colspan="2">
						<div style="position:relative; top:16px; left:24px; width:70px; height: 70px; border: solid 0px BLACK;">
							<a href="project?mode=edit&id=<%=idProject%>">
							<img src="images-projects/<%=project.getAvatar() %>" width="70px" height="70px" alt=""/>
							</a>
						</div>
						<div style="position:absolute; top:175px; left:540px; width:240px; height:20px; text-align:center;font-size:150%;">
							<b><%=project.getName() %> | LAUNCHING</b>
						</div>
					</td></tr>
					<tr>
						<td style="display: block; height: 344px; overflow-x: hidden; overflow-y: scroll; width: 100px;">
							<% for(ProjectModel obj:projectList) 
								if(obj.getId() != idProject){
							%>
								<div style="width: 80px; height: 80px;">
								<a class="" href="phase.jsp?idProject=<%=obj.getId()%>">
									<img src="images-projects/<%=obj.getAvatar() %>" width="80px" height="80px" alt=""/>
								</a>
								</div>
							<% } %>
						</td>
						<td>						
						<div id="phase">			
							<div id="v-scrollbar-phase" class="v-scrollbar-wrap">
								<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
								<div class="viewport"><div class="overview">
					            	<table class="phase-container" width="100%" cellpadding="0" cellspacing="0">
					                	<tr class="first-row">
					                    	<td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td class="phase-title">&nbsp;</td>
					                        <td colspan="6">&nbsp;</td>
					                        <td colspan="18">01/07/2011 - 18/07/2011</td>
					                    </tr>
					                    <tr class="date">
					                    	<td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>1</td>
					                        <td>2</td>
					                        <td>3</td>
					                        <td>4</td>
					                        <td>5</td>
					                        <td>6</td>
					                        <td class="active-day">7</td>
					                        <td>8</td>
					                        <td>9</td>
					                        <td>10</td>
					                        <td>11</td>
					                        <td>12</td>
					                        <td>13</td>
					                        <td>14</td>
					                        <td>15</td>
					                        <td>16</td>
					                        <td>17</td>
					                        <td>18</td>
					                    </tr>
					                    <tr class="phase-header">
					                    	<td class="phase-icon-header"><img src="image/ico_white_circle.gif" alt="white circle"  /></td>
					                        <td class="phase-icon-header"><img src="image/ico_white_check.gif" alt="Check"  /></td>
					                        <td>
					                        	<span class="phase-icon-title">
					                            	<img src="image/ico_page.gif" alt="Icon Page" />&nbsp;
					                            </span>
					                            <span class="phase-icon-title">
					                                <img src="image/ico_folder.gif" alt="Icon Folder" />&nbsp;
					                            </span>
					                            <span class="phase-icon-title">
					                                <img src="image/ico_basket.gif" alt="Icon Basket" />&nbsp;
					                            </span>
					                        </td>
					                       	<td><span class="small-arrow">SIDE</span></td>
					                        <td><span class="small-arrow">PIC</span></td>
					                        <td><img src="image/ico_mail.gif" alt="" /></td>
					                        <td><img src="image/ico_shape.gif" alt="" /></td>
					                        <td><img src="image/ico_attach.gif" alt="" /></td>
					                        <td>%</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                    </tr>
					                    <tr class="phase-list">
					                    	<td class="phase-icon-list">&nbsp;</td>
					                        <td class="phase-icon-list">&nbsp;</td>
					                        <td class="phase-expandable">
												<span class="expandButton" onclick="togglePhaseDetail(this);"></span>
					                        	<span class="phase-list-title">
					                                PHASE 1 - PROJECT BRIEF
					                            </span>
					                        </td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                    </tr>
					                    <tr class="phase-list">
					                    	<td class="phase-icon-list">&nbsp;</td>
					                        <td class="phase-icon-list">&nbsp;</td>
					                        <td class="phase-expandable">
												<span class="expandButton" onclick="togglePhaseDetail(this);"></span>
					                        	<span class="phase-list-title">
					                                PHASE 2 - CONCEPT DEVELOPMENT
					                            </span>
					                        </td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                    </tr>
					                    <tr class="phase-list">
					                    	<td class="phase-icon-list">&nbsp;</td>
					                        <td class="phase-icon-list">&nbsp;</td>
					                        <td class="phase-collapsable">
												<span class="collapseButton" onclick="togglePhaseDetail(this);"></span>
					                        	<span class="phase-list-title">
					                                PHASE 3 - PROPOSAL SUBMITING
					                            </span>
					                        </td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                    </tr>
					                    <tr class="phase-list-detail-header">
					                    	<td class="phase-icon-list">&nbsp;</td>
					                        <td class="phase-icon-list">&nbsp;</td>
					                        <td class="phase-detail-header">
					                        	<span class="phase-list-title">
					                                Proposal & CE
					                            </span>
					                        </td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                    </tr>
					                    <tr class="phase-list-detail">
					                    	<td class="phase-icon-list"><img src="image/ico_blue_cricle.gif" alt="Blue circle" /></td>
					                        <td class="phase-icon-list"><img src="image/ico_mark_is_draft.gif" alt="Mark is draft" /></td>
					                        <td class="phase-detail">
					                        	<span class="phase-list-title">
													CE
					                            </span>
					                        </td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                    </tr>
					                    <tr class="phase-list-detail">
					                    	<td class="phase-icon-list"><img src="image/ico_blue_cricle.gif" alt="Blue circle" /></td>
					                        <td class="phase-icon-list"><img src="image/ico_active.gif" alt="Active" /></td>
					                        <td class="phase-detail">
					                        	<span class="phase-list-title">
													PO raise
					                            </span>
					                        </td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                    </tr>
					                    <tr class="phase-list-detail">
					                    	<td class="phase-icon-list"><img src="image/ico_blue_cricle.gif" alt="Blue circle" /></td>
					                        <td class="phase-icon-list"><img src="image/ico_active.gif" alt="Active" /></td>
					                        <td class="phase-detail">
					                        	<span class="phase-list-title">
													Proposal
					                            </span>
					                        </td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                    </tr>
					                    <tr class="phase-list-detail">
					                    	<td class="phase-icon-list"><img src="image/ico_blue_cricle.gif" alt="Blue circle" /></td>
					                        <td class="phase-icon-list"><img src="image/ico_active.gif" alt="Active" /></td>
					                        <td class="phase-detail">
					                        	<span class="phase-list-title">
													Feedback & Finalize
					                            </span>
					                        </td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                    </tr>
					                    <tr class="phase-list">
					                    	<td class="phase-icon-list">&nbsp;</td>
					                        <td class="phase-icon-list">&nbsp;</td>
					                        <td class="phase-expandable">
												<span class="expandButton" onclick="togglePhaseDetail(this);"></span>
					                        	<span class="phase-list-title">
					                                PHASE 4 - QUOTATION & CONTRACT
					                            </span>
					                        </td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                        <td>&nbsp;</td>
					                    </tr>
					                </table><!-- end .phase-container -->
								</div></div>
							</div>
							
						<!--	</div></div>
							</div>
						-->	
						</div><!-- end #phase -->
						<div id="phase-notice">
							<div class="phase-notice-left">
								<div class="main-field"><img src="image/ico_white_circle.gif" alt="" />&nbsp;</div>
								<div class="notice-icon"><img src="image/ico_orange_circle.gif" alt="" /> At Risk</div>
								<div class="notice-icon"><img src="image/ico_red_circle.gif" alt=""  /> Off Track</div>
								<div class="notice-icon"><img src="image/ico_blue_cricle.gif" alt="" /> On Track</div>
								<div class="notice-icon"><img src="image/ico_gray_circle.gif" alt="" /> Not Active</div>
							</div><!-- end .phase-notice-left -->
							<div class="phase-notice-right">
								<div class="main-field"><img src="image/ico_white_check.gif" alt="" />&nbsp;</div>
								<div class="notice-icon"><img src="image/ico_mark_is_draft.gif" alt="" /> Mark is draft</div>
								<div class="notice-icon"><img src="image/ico_active.gif" alt=""  /> Active</div>
								<div class="notice-icon"><img src="image/ico_putt_on_hold.gif" alt="" /> Put on hold</div>
								<div class="notice-icon"><img src="image/ico_mark_is_cancle.gif" alt="" /> Mark as cancelled</div>
								<div class="notice-icon"><img src="image/ico_mark_is_complete.gif" alt="" /> Mark complete</div>
							</div><!-- end .phase-notice-right -->
							<div class="clear"></div>
						</div><!-- end #phase-notice -->
						
					</td></tr>
				</table>
			</td>
			<td class="">
				<table class="tblOperations">
					<thead><td class="tblOperations header">MAIL BOX</td></thead>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td class="tblOperations blankLine"></td></tr>
				</table>
				<table class="tblOperations">
					<thead><td class="tblOperations header">ATTACHED FILES</td></thead>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td class="tblOperations blankLine"></td></tr>
				</table>
				<table class="tblOperations">
					<thead><td class="tblOperations header">DISCUSSION</td></thead>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td class="tblOperations blankLine"></td></tr>
				</table>
				<table class="tblOperations">
					<thead><td class="tblOperations header">TIPS & TRICKS</td></thead>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td>
						
					</td></tr>
					<tr><td class="tblOperations blankLine"></td></tr>
				</table>
			</td>
		</tr>
	</table>
</div>
</body>
</html>